<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useAddUserStore } from '../../store/addUser';
import departmentSelect from './utils/departmentSelect.vue';
import PositionSelect from './utils/positionSelect.vue';
import RoleSelect from './utils/roleSelect.vue';
import { FormInstance } from 'element-plus'
import { useUserStore } from '../../store/user';
import utils from '../../utils/utils';
import user from '../../api/user';
const ruleFormRef = ref<FormInstance | undefined>()
const addUserStore = useAddUserStore()
const userStore = useUserStore()
const text = computed(() => {
    return addUserStore.user.id ? '修改用户' : '新增用户'
})
const submitFailed = function () {
    addUserStore.setUserNull()
    addUserStore.setOpen(false)
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            addUserStore.user.time = utils.getCurrentTime()
            console.log(addUserStore.user)
            if (addUserStore.user.id == '') {
                await user.addUser(addUserStore.user).then(res => {
                    if (res.data.code == 200) {
                        utils.showMessage('添加成功', 'success', 2000)
                    } else {
                        utils.showMessage('添加失败', 'error', 2000)
                    }
                }).catch(err => {
                    console.log(err)
                })
            } else {
                await user.updateUser(addUserStore.user).then(res => {
                    if (res.data.code == 200) {
                        utils.showMessage('修改成功', 'success', 2000)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
            await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
                userStore.userList = res.data.data
                userStore.total = res.data.total
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                userStore.changeLoading()
            })
            addUserStore.setOpen(false)
        }
    })
}
</script>
<template>
    <el-dialog v-model="addUserStore.isOpen" :title="text" width="600" center>
        <el-form ref="ruleFormRef" :model="addUserStore.user" label-width="80px" style="padding: 1rem;">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="用户名">
                        <el-input v-model="addUserStore.user.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <!-- 密码栏单独占一个 el-col -->
                    <el-form-item label="真实姓名">
                        <el-input v-model="addUserStore.user.realName" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="addUserStore.user.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <RoleSelect />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="addUserStore.user.status">
                            <el-radio :value=1>启用</el-radio>
                            <el-radio :value=0>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" v-if="addUserStore.user.id===''">
                        <el-input v-model="addUserStore.user.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="addUserStore.user.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位">
                        <PositionSelect />
                    </el-form-item>
                    <el-form-item label="部门">
                        <departmentSelect />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="submitFailed">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>